<template>
  <div class="mt-5 bg-blue-200 p-5" title="子组件" :can-expan="false">
    <h3>子组件</h3>
    <ul>
      <li>修改父组件的 name <Button @click="emits('changeName')">修改</Button> </li>
      <li>修改父组件的 car <Button @click="emits('changeCar')">修改</Button> </li>
      <li>
        <input v-model="inputData" />
        <Button @click="sendData">向父组件发送数据</Button>
      </li>
    </ul>
  </div>
</template>
<script lang="ts" setup>
  import { Button } from '@/components/Button';
  import { ref } from 'vue';

  // 定义要接收从父组件传来方法，方法名和 @xxx 保持一致，而不是和 ="aaa' 中的保持一致
  let emits = defineEmits(['changeName', 'changeCar', 'sendData']);

  let inputData = ref();

  function sendData() {
    emits('sendData', inputData)
  }

</script>

<style lang="less" scoped>
  button {
    margin-left: 5px;
  }

  li {
    margin-top: 10px;
  }

  div {
    border-radius: 10px;
  }

  input {
    height: 25px;
    padding: 2px 5px;
    line-height: 25px;
  }
</style>
